<!--  简历分析各个评估维度组件  -->
<template>
  <div class="dimension-scores">
    <a-list item-layout="horizontal" :data-source="dimensionsWithScores">
      <template #renderItem="{ item, index }">
        <a-list-item>
          <a-list-item-meta>
            <template #title>
              <div class="dimension-title">
                <span class="dimension-name">{{ item.name }}</span>
                <span class="dimension-score">{{ scores[index] }}/{{ item.weight }}</span>
              </div>
            </template>
            <template #description>
              <div class="dimension-reason">
                {{ getDimensionReason(index) }}
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  dimensions: {
    type: Array,
    required: true,
    default: () => [],
  },
  scores: {
    type: Array,
    required: true,
    default: () => [],
  },
})

const dimensionsWithScores = computed(() => {
  return props.dimensions.map((dim, index) => ({
    ...dim,
    score: props.scores[index],
  }))
})

//获取维度评估的理由
const getDimensionReason = (index) => {
  const reason = dimensionsWithScores.value[index]
  return reason.reason
}
</script>

<style scoped>
.dimension-scores {
  padding: 16px;
}

.dimension-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dimension-name {
  font-weight: 500;
  color: #1890ff;
}

.dimension-score {
  font-weight: bold;
  color: #52c41a;
}

.dimension-reason {
  color: #666;
  margin-top: 8px;
  line-height: 1.6;
}
</style>
